<!--
 * @Author: Wushiqi
 * @Descripttion: 视频详情
 * @Date: 2020-10-12 22:05:47
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-20 23:05:44
-->
<template>
  <div v-if="model">
    <navbar />
    <div class="detail-info">
      <div class="video">
        <video :src="model.content" controls="controls"></video>
        <div class="detail-info-text">
          <div>
            <span>{{ model.category.title }}</span>
            <span>{{ model.name }}</span>
          </div>
          <div>
            <span>{{ model.userinfo.name }}</span>
            <span>146.4万次观看</span>
            <span>5281弹幕</span>
            <span>{{ model.date }}</span>
          </div>
          <div>
            <p :class="{activeColor: collectionActive}" @click="collectionClick">
              <span class="icon-star-full"></span>
              <span>收藏</span>
              
            </p>
            <p :class="{activeColor: subscriptActive}" @click="subscriptClick">
              <span class="icon-bubble"></span>
              <span>关注</span>
            </p>
            <p>
              <span class="icon-redo2"></span>
              <span>分享</span>
            </p>
          </div>
        </div>
        
      </div>
      <div class="detail-parent">
        <cover v-for="(item, key) in commendList" :key="key" class="detail-item" :detailItem="item" />
      </div>
      <comment-title ref="commentCom" :dataLength="lens" @postComment="postSuccess" />
      <comment ref="commentPublish" @commentLength="len => lens = len" @publishClick="postChildClick" />
    </div>
    
  </div>
</template>

<script>
import Navbar from '@/components/common/Navbar'
import Cover from '@/views/Cover'
import commentTitle from '@/components/article/commentTitle'
import comment from '@/components/article/comment'
export default {
  components: {
    Navbar,
    Cover,
    commentTitle,
    comment
  },
  data() {
    return {
      model: null,
      commendList: [],
      myUser: null,
      lens: 0,
      postCom: {
        comment_content: '',
        comment_date: '',
        parent_id: null,
        comment_id: null
      },
      collectionActive: false,
      subscriptActive: false
    }
  },
  created() {
    this.articalItemData()
    this.commendData()
    this.collectionInit()
  },
  watch: {
    $route() { // 监控路由跳转（点击推荐的内容）
      this.articalItemData()
      this.commendData()
      this.collectionInit()
    }
  },
  methods: {
    // 获取文章信息
    async articalItemData() {
      const res = await this.$http.get('/article/' + this.$route.params.id)
      this.model = res.data[0]
      if (this.model) {
        this.subscriptionInit()
      }
    },
    // 获取推荐文章
    async commendData() {
      const res = await this.$http.get('/commend')
      this.commendList = res.data
    },
    // 发送评论
    async postSuccess(val) {
      this.postCom.comment_content = val
      const date = new Date()
      let m = date.getMonth() + 1
      const d = date.getDate()
      if (m < 10) {
        m = '0' + m
      }
      let str = `${m}-${d}`
      this.postCom.comment_date = str
      this.postCom.comment_id = this.$route.params.id
      const res = await this.$http.post('/comment_post/' + localStorage.getItem('id'), this.postCom)
      this.$refs.commentPublish.commentData()
      this.postCom.parent_id = null
      if(res.status == 200) {
        this.$msg.fail('评论发表成功')
      }
    },
    // 点击回复,聚焦输入框
    postChildClick: function(id) {
      this.postCom.parent_id = id
      this.$refs.commentCom.postIpt()
    },
    // 收藏文章
    async collectionClick() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.post('/collection/' + localStorage.getItem('id'), {
          article_id: this.$route.params.id
        })
        if (res.data.msg === '收藏成功') {
          this.collectionActive = true
        } else {
          this.collectionActive = false
        }
        this.$msg.fail(res.data.msg)
      }      
    },
    // 进入页面获取是否收藏
    async collectionInit() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.get('/collection/' + localStorage.getItem('id'), {
          params: {
            article_id: this.$route.params.id
          }
        })
        this.collectionActive = res.data.success
      }
    },
    // 进入页面获取是否关注
    async subscriptionInit() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.get('/sub_scription/' + localStorage.getItem('id'), {
          params: {
            sub_id: this.model.userid
          }
        })
        this.subscriptActive = res.data.success
      }
    },
    // 点击关注发帖用户
    async subscriptClick() {
      if (localStorage.getItem('token')) {
        const res = await this.$http.post('/sub_scription/' + localStorage.getItem('id'), {
          sub_id: this.model.userid
        })
        if (res.data.msg === '关注成功') {
          this.subscriptActive = true
        } else {
          this.subscriptActive = false
        }
        this.$msg.fail(res.data.msg)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.detail-info {
  background-color: white;
  .video {
    width: 100%;
    video {
      width: 100%;
    }
    .detail-info-text {
      padding: 4.167vw;
      div:nth-child(1) {
        span:nth-child(1) {
          padding: 0 2.778vw;
          background-color: #f4f4f4;
          color: #fb7299;
          border-radius: 2.778vw;
        }
      }
      div:nth-child(2) {
        padding: 2.778vw;
        span {
          color: #aaa;
          font-size: 3.333vw;
        }
        span:nth-child(1) {
          color: black;
          font-size: 4vw;
          padding-right: 2.778vw;
        }
      }
      div:nth-child(3) {
        display: flex;
        padding: 0 2.778vw;
        p {
          color: #757575;
          display: flex;
          align-items: center;
          margin-right: 4.167vw;
          span:nth-child(1) {
            font-size: 5.833vw;
            margin-right: 0.833vw;
          }
          span:nth-child(2) {
            font-size: 3.611vw;
          }
        }
        .activeColor {
          color: #fb7299;
        }
      }
    }
  }
}
.detail-parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .detail-item {
    margin: 1.389vw 0;
    width: 45%;
  }
}
</style>